<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal组件化</title>
  <style>
    .clearFixed:after {
      content: "";
      display: block;
      clear: both;
    }

    .btn-modal {
      border: 1px solid #999;
      border-radius: 4px;
      background: #fff;
    }

    .dialog .dialog-overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9998;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      background: #000;
    }

    .dialog .dialog-box {
      position: absolute;
      z-index: 9999;
      left: 50%;
      top: 30%;
      margin-left: -164px;
      font-size: 12px;
      padding-bottom: 10px;
      border-radius: 4px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      background: #fff;
      width: 328px;
    }

    .dialog .dialog-header {
      padding: 10px 19px;
      color: #676666;
      background: #eee;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .dialog .dialog-header h3 {
      margin: 0;
      font-size: 16px;
    }

    .dialog .dialog-header .btn-close {
      position: absolute;
      right: 10px;
      top: 8px;
      font-weight: bold;
      cursor: pointer;
    }

    .dialog .dialog-content {
      padding: 10px;
      margin: 13px;
      color: #666;
      font-size: 14px;
    }

    .dialog .dialog-footer {
      text-align: center;
    }

    a.btn {
      position: relative;
      display: inline-block;
      margin: 2px 8px;
      padding: 4px 6px;
      width: 50px;
      text-align: center;
      color: #fff;
      text-decoration: none;
      background-color: rgb(66, 133, 244);
      border-radius: 3px;
    }

    a.btn:hover {
      background-color: rgb(58, 117, 215);
    }
  </style>
</head>

<body>
<button id="btn1" class="btn-modal">文本消息+取消键</button>
<button id="btn2" class="btn-modal">文本链接+取消键</button>
<button id="btn3" class="btn-modal">标题+文本+取消/确认键(动作)</button>
<button id="btn4" class="btn-modal">标题+列表文本+取消/确认键</button>
<button id="btn5" class="btn-modal">标题+文本消息</button>
<script src="../js/jquery.js"></script>
<script>
  var Dialog = (function () {
    function Modal() {
      this.createDialog();
      this.bindEvent();
    }

    Modal.prototype = {
      createDialog: function () {
        var tpl = `<div class="dialog" style="display:none">
                      <div class="dialog-overlay"></div>
                      <div class="dialog-box">
                        <div class="dialog-header">
                          <h3></h3>
                          <span class="btn-close">x</span>
                        </div>
                        <div class="dialog-content"></div>
                        <div class="dialog-footer">
                          <a href="#" class="btn btn-close">取消</a>
                          <a href="#" class="btn btn-confirm">确定</a>
                        </div>
                      </div>
                    </div>`
        this.$dialog = $(tpl);
        $('body').append(this.$dialog);
      },
      bindEvent: function () {
        var _this = this;
        _this.$dialog.find('.btn-close').on('click', function (e) {
          e.preventDefault();
          _this.opts.onClose();
          _this.hideDialog();
        });
        _this.$dialog.find('.btn-confirm').on('click', function (e) {
          e.preventDefault();
          _this.opts.onConfirm();
          _this.hideDialog();
        });
      },
      open: function (opts) {
        this.setOpts(opts);
        console.log(this.opts);
        this.setDialog();
        this.showDialog();
      },
      close: function () {
        this.hideDialog();
      },
      defaultOpts: {
        title: '',
        message: '',
        isShowCloseBtn: true,
        isShowConfirmBtn: false,
        onClose: function () {
        },
        onConfirm: function () {
        }
      },
      setOpts: function (opts) {
        if (typeof opts === 'string') {
          this.opts = $.extend({}, this.defaultOpts, {message: opts});
        } else if (typeof opts === 'object') {
          this.opts = $.extend({}, this.defaultOpts, opts);
        }
      },
      //根据参数设置model
      setDialog: function (opts) {
        var $dialog = this.$dialog;
        console.log($dialog);
        if (!this.opts.title) {
          $dialog.find('.dialog-header').hide();
        } else {
          $dialog.find('.dialog-header').show();
        }
        if (!this.opts.isShowCloseBtn) {
          $dialog.find('.dialog-footer .btn-close').hide();
        } else {
          $dialog.find('.dialog-footer .btn-close').show();
        }
        if (!this.opts.isShowConfirmBtn) {
          $dialog.find('.dialog-footer .btn-confirm').hide();
        } else {
          $dialog.find('.dialog-footer .btn-confirm').show();
        }
        $dialog.find('.dialog-header h3').text(this.opts.title);
        $dialog.find('.dialog-content').html(this.opts.message);
      },
      showDialog: function () {
        this.$dialog.show();
      },
      hideDialog: function () {
        this.$dialog.hide();
      }
    };
    return new Modal();
  })()
  //调用
  $("#btn1").on("click", function () {
    Dialog.open('hello, world');
  });
  $("#btn2").on("click", function () {
    Dialog.open('<a href="https://github.com/" target="blank">Go to Github?</a>');
  });
  $("#btn3").on("click", function () {
    Dialog.open({
      title: 'Welcome',
      message: 'Hello, world',
      isShowCloseBtn: true,
      isShowConfirmBtn: true,
      onClose: function () {
        alert('close');
      },
      onConfirm: function () {
        alert('confirm');
      }
    });
  });
  var listDiv = `<ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                  </ul>`;
  $("#btn4").on("click", function () {
    Dialog.open({
      title: 'list',
      message: listDiv,
      isShowCloseBtn: true,
      isShowConfirmBtn: true
    });
  })
  $("#btn5").on("click", function () {
    Dialog.open({
      title: 'Welcome',
      message: 'hello',
      isShowCloseBtn: false,
      isShowConfirmBtn: false
    });
  });
</script>
</body>

</html>